import React, { useEffect, useState } from 'react'
import api from '@/api'
import { Table, Button, message, Pagination, Card } from "antd"
import { getCommentType } from "@/type/comment"
import type { ColumnsType } from 'antd/es/table';
import { SearchOutlined, EditOutlined, CloseOutlined } from '@ant-design/icons';
export default function GoodComment() {
    useEffect(() => {
        getgoodcom(query)
    }, [])
    interface DataType {
        key: string;
        name: string;
        age: number;
        address: string;
        tags: string[];
    }
    const [sercomlist, setGoodcomlist] = useState([])
    const [total, setTotal] = useState()
    const [query, setQuery] = useState<getCommentType>({
        pageSize: 6,
        currentPage: 1
    })
    const getgoodcom = async (params: any) => {
        const res = await api.comment.getAllGoodcomment(params)
        console.log("res", res.data.total);
        setTotal(res.data.total)
        setGoodcomlist(res.data.data)
    }
    const deletethis = async (arg: any) => {
        console.log(arg);
        const res = await api.comment.deleteGoodcomment({ id: arg.id })
        message.success(res.data.msg)
        getgoodcom(query)

    }
    function pageChange(args: any) {
        getgoodcom({ ...query, currentPage: args })
        setQuery({ ...query, currentPage: args })
    }
    const columns: ColumnsType<DataType> = [
        {
            title: '商品名称',
            dataIndex: 'name',
        },
        {
            title: '评论用户',
            dataIndex: 'nickname',
        },
        {
            title: '评价内容',
            dataIndex: 'content',
            key: 'content'
        },
        {
            title: '分数',
            dataIndex: 'score',
            key: 'score'
        },
        {
            title: '评价时间',
            dataIndex: 'createdAt',
            key: 'createdAt'
        },
        {
            title: '操作',
            dataIndex: 'id',
            render: (text, record) => (
                <label>
                    <Button type="primary" danger shape="circle" icon={<CloseOutlined />} onClick={() => deletethis(record)} ></Button>
                </label>
            ),
        },
    ];
    return (
        <div>
            <Card>{
                sercomlist ? <>
                    <Table dataSource={sercomlist} columns={columns} pagination={false} />
                    <Pagination total={total} current={query.currentPage} pageSize={query.pageSize} onChange={pageChange}></Pagination>
                </> : <></>
            }
            </Card>
        </div>
    )
}
